<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Digital diary</title>
    </h:head>
    <h:body>
        <ui:composition template="./templates/basetemplate.xhtml">
            <ui:define name="content">
                <h:form>  
                    <p:megaMenu>  
                        <p:menuitem value="Home" url="/faces/home.xhtml" icon="ui-icon-close" />
                        <p:menuitem value="Create Plan" url="/faces/myplan.xhtml" icon="ui-icon-close" />
                        <p:menuitem value="Shared plan" url="/faces/sharedplan.xhtml" icon="ui-icon-close" /> 
                        <p:menuitem value="Settings" url="/faces/setting.xhtml" icon="ui-icon-close" />
                        <p:menuitem value="Sign out" action="#{loginHandler.logout()}"  icon="ui-icon-close" />  
                    </p:megaMenu>  <h:outputText style=" margin-left: 50px; color: #1c94c4; font-size:15px; font-family: serif" value="Welcome, #{homeHandler.loggedInUser.firstName} #{homeHandler.loggedInUser.lastName}"/>
                    <div style="clear: both; height: auto; border: 1px solid #DDDDDD; padding: 5px;">
                        <h2 style="margin: 0; padding: 0; color: #375e9f; border-bottom: 1px solid #DDDDDD">New plan</h2>
                        <table style="margin-top: 5px;">
                            <tr>
                                <td><h:outputLabel value="Title"></h:outputLabel></td>
                        <td> <p:inputText id="title" style="width: 420px;" value="#{myPlanHandler.title}" required="true" requiredMessage="Field is required"></p:inputText><br/>
                            <h:message styleClass="errorMsg" for="title" /></td>
                            </tr>
                            <tr>
                                <td valign="top"><h:outputLabel value="Description"></h:outputLabel><br/></td>
                            <td><p:inputTextarea id="description" style="width: 420px;"  rows="5" cols="20"   value="#{myPlanHandler.description}" required="true" requiredMessage="Field is required"></p:inputTextarea><br/>
                            <h:message styleClass="errorMsg" for="description" /></td>                                
                            </tr>
                            <tr>                                
                                <td><h:outputLabel value="Location"></h:outputLabel></td>
                            <td><p:inputText id="location"  value="#{myPlanHandler.location}" required="true" requiredMessage="Field is required" /><br/>
                            <h:message styleClass="errorMsg" for="location" /></td>  
                            
                            </tr>
                            <tr>                                
                                <td><h:outputLabel value="Date"></h:outputLabel></td>
                            <td><p:inputText id="date" value="#{myPlanHandler.plandate}" required="true" requiredMessage="Field is required" /><br/>
                            <h:message styleClass="errorMsg" for="date" /></td>                                
                            </tr>
                            <tr>                                
                              <td><h:outputLabel value="Privacy"></h:outputLabel></td>
                              <td><p:inputText id="privacy" value="#{myPlanHandler.privacy}" required="true" requiredMessage="Field is required" /><br/>
                            <h:message styleClass="errorMsg" for="privacy" /></td>                                
                            </tr>
                            <tr>
                                <td><h:outputLabel value="Alarm me:"></h:outputLabel></td>
                            <td><p:inputMask   mask="99/99/9999"  id="alarmDate" value="#{myPlanHandler.alarmDate}"   required="true" requiredMessage="Field is required"></p:inputMask>
                            <h:message styleClass="errorMsg" for="alarmDate" /></td>
                            </tr>
                            <tr>                                
                                <td></td>
                                <td><p:commandButton id="loggedIn" value="Login" action="#{myPlanHandler.saveMyPlan()}">
                                 </p:commandButton></td>
                            </tr>                                                        
                        </table>
                    </div>
                    <br /><br />  
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
